.{$menu-prefix}
  width 100%
  display block
  position relative
  line-height 1
  &, &-ul
    margin 0
    padding 0
    outline none
    list-style none
  &-li, &-show
    position relative
  &-show
    padding 15px 26px
    cursor pointer
    text-overflow clip
    white-space nowrap
    transition padding $transition-time
    &-desc
      transition opacity .3s cubic-bezier(.645,.045,.355,1), width .3s cubic-bezier(.645,.045,.355,1)
      opacity 1
    &-count
      transition right $transition-time
      z-index 2
      right 60px
      position absolute
      top 50%
      transform translateY(-50%)
    &-expand
      position absolute
      right 20px
      top 50%
      transform translateY(-50%)
      font-size 12px

.{$menu-prefix}-mode-normal
  .{$menu-prefix}-ul
    max-height 0
    transition max-height .3s cubic-bezier(0,1,0,1)
    overflow hidden
  .{$menu-prefix}-li
    .{$menu-prefix}-li
      .{$menu-prefix}-show
        padding-left 46px
      .{$menu-prefix}-li
        .{$menu-prefix}-show
          padding-left 66px
  .{$menu-prefix}-li-opened
    > .{$menu-prefix}-show
      transform rotate(0deg)
      .{$menu-prefix}-show-expand
        > i
          transform rotate(0deg)
    > .{$menu-prefix}-ul
      max-height 1000px
      transition max-height .8s ease-in-out
  .{$menu-prefix}-show
    overflow hidden
    text-overflow ellipsis
    transition color $transition-time
    &-icon
      margin-right 5px
      font-size 16px
      vertical-align revert
    &-expand
      > i
        transition transform $transition-time
        transform rotate(-90deg)

.{$menu-prefix}-dark
  background-color $dark-color
  color $gray4-color
  .{$menu-prefix}-show
    border-right 0 solid rgba($black-color, 0)
  .{$menu-prefix}-ul
    background-color darken($dark-color, 5%)
  .{$menu-prefix}-li-selected
    background-color $primary-color
    color $white-color

.{$menu-prefix}-white
  background-color $white-color
  .{$menu-prefix}-ul
    background-color $white-color
  .{$menu-prefix}-li
    .{$menu-prefix}-show
      &:after
        position absolute
        content ''
        top 0
        right 0
        bottom 0
        width 0
        background-color $primary-color
      &:hover
        color $primary-color
    .{$menu-prefix}-li-selected
      background-color rgba($primary-color, .15)
      color $primary-color
      &:after
        width 5px
        transition $transition-time

.{$menu-prefix}-size-collapse
    .{$menu-prefix}-show
      padding-left 20px
    .{$menu-prefix}-show-expand
      top 40%
      right 10px
      transform rotate(-90deg)
    .{$menu-prefix}-ul
      padding 5px 0
      margin-left 5px
      left 100%
      top 0
      width 150px
      border-radius 4px
      position absolute
      max-width 0
      transition $transition-time cubic-bezier(.78, .17, .43, 1)
      white-space nowrap
      display inline-block
      overflow hidden
      opacity .8
      transform scale(.8)
      transform-origin left
      .{$menu-prefix}-show
        overflow hidden
        text-overflow ellipsis
    > .{$menu-prefix}-li
      > .{$menu-prefix}-show
        padding-left 28px
        .{$menu-prefix}-show-icon
          margin-right 0
          font-size 17px
        .{$menu-prefix}-show-desc
          visibility visible
          opacity 0
          display inline-block
          width 0
          text-overflow clip
        .{$menu-prefix}-show-expand
          display none
    .{$menu-prefix}-li:hover
      > .d-menu-ul
        max-width 250%
        opacity 1
        transform scale(1)
        overflow visible
        &:before
          content ''
          position absolute
          height 100%
          top 0
          left -10px
          width 10px
